<template>
  <div class="u-flex u-aic search-field {{isActive ? 'ignore-active' : ''}}">
    <div class="u-flex u-aic action">
      <icon size="28rpx" type="search"></icon>
      <mt-input
        class="field"
        :style="fieldstyle"
        :value="searchvalue"
        @input="onSearchChange"
        placeholder="{{placeholder}}"
        focus="{{focus}}"
      > </mt-input>
      <div style="width: 80rpx; height: 2rpx"></div>
      <image v-if="isActive"
             src="{{src}}"
             capture-catch:tap="bindClear"
             style="padding: 20rpx; right: 12rpx;"
      ></image>
    </div>
    <button
      v-if="isActive"
      @tap="onCancel"
      class="search-field-button-cancel"
            hover-class="none">取消</button>
  </div>
</template>

<script>
  export default {
    behaviors: [],
    properties: {
      placeholder: String,
      value: null
    },
    computed: {
      isActive(data) {
        return data.searchvalue && data.searchvalue.length > 0
      }
    },
    data() {
      return {
        focus: true,
        fieldstyle: 'flex: 1; margin-left: 17rpx',
        searchvalue: '',
        src: 'http://oss.kaoyanvip.cn/uploads/file1545442649178.png'
      }
    },
    attached() {
      this.setData({
        searchvalue: this.data.value,
        focus: true
      })
    },
    handles: {
      onSearchChange(e) {
        this.setData({
          searchvalue: e.detail
        })
        this.triggerEvent('searchchange', e.detail)
      },
      bindClear(e) {
        console.d('clear')
        this.setData({
          searchvalue: ''
        })
      },
      onCancel(e) {
        this.setData({
          searchvalue: ''
        })
        this.triggerEvent('cancel')
      }
    },
  }
</script>

<style lang="less">
  @import "../../app.component.less";

  .search-field {
    color: @text-color-gray-300;

    border-radius: 10pt;
    margin-top: 20pt;
    margin-bottom: 20pt;
    font-size: 26pt;

    &::after {
      content: '';
      clear: both;
    }

    .action {
      padding-left: 30pt;
      background-color: #f5f6fa;
      box-sizing: border-box;
      flex: 1;
      position: relative;
      padding-top: 12pt;
      padding-bottom: 12pt;
      border-radius: 10pt;
    }

    image {
      size: 30pt;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 32pt;
      z-index: 3;
    }
  }

  .search-field-button-cancel {
    width: 82pt;
    text-align: center;
    color: #007bff;
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
    margin-left: 26pt;
    #default.font-style(400);
    height: 60pt;
    line-height: 60pt;
    &::after {
      border: none;
    }
    margin-right: 0;
  }

</style>
